"use client";

import { Dropdown, message } from 'antd'
import { RiUserLine, RiSettingsLine, RiLockLine, RiLogoutBoxLine } from '@remixicon/react'
import { useRouter } from 'next/navigation'
import { authService } from '@/lib/services/auth'
import { useState } from 'react'
import { ChangePasswordModal } from './modals/change-password-modal'
import { ProfileModal } from './modals/profile-modal'

const navClassName = `
  flex items-center relative px-3 h-8 rounded-xl
  font-medium text-sm
  cursor-pointer
  group
`

export const UserMenu = () => {
  const router = useRouter()
  const [showPasswordModal, setShowPasswordModal] = useState(false)
  const [showProfileModal, setShowProfileModal] = useState(false)

  const handleMenuClick = async ({ key }: { key: string }) => {
    switch (key) {
      case 'profile':
        setShowProfileModal(true)
        break
      case 'settings':
        router.push('/settings')
        break
      case 'password':
        setShowPasswordModal(true)
        break
      case 'logout':
        try {
          await authService.logout()
          message.success('已退出登录')
          router.push('/signin')
        } catch (error) {
          message.error('退出登录失败')
        }
        break
    }
  }

  const userMenuItems = [
    {
      key: 'profile',
      label: '个人信息',
      icon: <RiUserLine className="w-4 h-4" />
    },
    {
      key: 'settings',
      label: '账号设置',
      icon: <RiSettingsLine className="w-4 h-4" />
    },
    {
      key: 'password',
      label: '修改密码',
      icon: <RiLockLine className="w-4 h-4" />
    },
    {
      type: 'divider' as const
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <RiLogoutBoxLine className="w-4 h-4" />,
      danger: true
    }
  ]

  return (
    <>
      <Dropdown
        menu={{
          items: userMenuItems,
          onClick: handleMenuClick
        }}
      >
        <button className={`${navClassName} hover:bg-gray-100`}>
          <RiUserLine className="w-4 h-4" />
          <span className="ml-2">账户</span>
        </button>
      </Dropdown>

      <ChangePasswordModal
        open={showPasswordModal}
        onClose={() => setShowPasswordModal(false)}
      />

      <ProfileModal
        open={showProfileModal}
        onClose={() => setShowProfileModal(false)}
      />
    </>
  )
} 